﻿{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户充值</title>

    <link rel="stylesheet" type="text/css" href="/static/pays/css/amazeui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/pays/css/main.css"/>

</head>
<body>
<div class="pay">
    <!--主内容开始编辑-->
    <div class="tr_recharge">
        <div class="tr_rechtext">
            <p class="te_retit"><img src="/static/pays/images/coin.png" alt="">会员中心</p>
            <p>请选择时长进行续费</p>
            <p>注意:此处的1个月默认按30天计算,1年按365天计算</p>
        </div>
        <form method="POST" action="{% url 'pay_post' %}" class="am-form" id="doc-vld-msg">
        {% csrf_token %}
            <div class="tr_rechbox">
                <div class="tr_rechhead">
                    <img src="/static/pays/images/ys_head2.jpg"/>
                    <p style="font-size: 15px">欢迎您，<strong>{{ username }}</strong>！</p>
                    <div class="tr_rechheadcion">
                        {% if end_data %}
                            <span style="font-size: 15px">您的会员到期时间：<span><strong>{{ end_data|date:"Y-m-d H:i:s" }}</strong></span></span>
                        {% else %}
                            <span style="font-size: 15px">您还没有激活会员。</span>
                        {% endif %}
                    </div>
                </div>
                <div class="tr_rechli am-form-group">
                    <ul class="ui-choose am-form-group" id="uc_01">
                        <li>
                            <label class="am-radio-inline">
                                <input type="radio" name="docVlGender" required data-validation-message="请选择一项续费时长"
                                       class="am-field-valid"> 1个月
                            </label>
                        </li>
                        <li>
                            <label class="am-radio-inline">
                                <input type="radio" name="docVlGender" data-validation-message="请选择一项续费时长"> 3个月
                            </label>
                        </li>
                        <li>
                            <label class="am-radio-inline">
                                <input type="radio" name="docVlGender" data-validation-message="请选择一项续费时长"> 6个月
                            </label>
                        </li>

                        <li>
                            <label class="am-radio-inline">
                                <input type="radio" name="docVlGender" data-validation-message="请选择一项续费时长"> 1年
                            </label>
                        </li>
                        <li>
                            <label class="am-radio-inline">
                                <input type="radio" name="docVlGender" data-validation-message="请选择一项续费时长"> 3年
                            </label>
                        </li>
                    </ul>
                </div>
                <div class="tr_rechcho am-form-group">
                    <span>充值方式：</span>
                    <label class="am-radio">
                        <input type="radio" name="radio1" value="WX" data-am-ucheck required
                               data-validation-message="请选择一种充值方式" checked><img src="/static/pays/images/wechatpay.png">
                    </label>
                    <label class="am-radio" style="margin-right:30px;">
                        <input type="radio" name="radio1" value="ZFB" data-am-ucheck
                               data-validation-message="请选择一种充值方式"><img src="/static/pays/images/zfbpay.png">
                    </label>
                </div>
                <div class="tr_rechnum">
                    <span>应付金额：</span>
                    <p class="rechnum">0.00元</p>
                </div>
            </div>
            {#        隐藏字段:payway支付端;payname支付应用;支付金额amount#}
            <input type="hidden" name="payname" id="payname" value="MyAI">
            <input type="hidden" name="payway" id="payway" value="PC">
            <input type="hidden" name="amount" id="amount" value="0.00">
            <input type="hidden" name="days" id="days" value="0">
            <div class="tr_paybox">
                <input type="submit" value="确认支付" class="tr_pay am-btn"/>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript" src="/static/pays/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/pays/js/amazeui.min.js"></script>
<script type="text/javascript" src="/static/pays/js/ui-choose.js"></script>
<script type="text/javascript">
    // 将所有.ui-choose实例化
    $('.ui-choose').ui_choose();
    // uc_01 ul 单选
    var uc_01 = $('#uc_01').data('ui-choose'); // 取回已实例化的对象
    uc_01.click = function (index, item) {
        console.log('click', index, item.text())
    }
    uc_01.change = function (index, item) {
        console.log('change', index, item.text())
    }
    $(function () {
        $('#uc_01 li:eq(4)').click(function () {
            $('.tr_rechoth').show();
            $('.tr_rechoth').find("input").attr('required', 'true')
            $('.rechnum').text('498.00元');
            $('#amount').val('498.00');
            $('#days').val('1095');
        })
        $('#uc_01 li:eq(0)').click(function () {
            $('.tr_rechoth').hide();
            $('.rechnum').text('19.00元');
            $('#amount').val('19.00');
            $('#days').val('30');
        })
        $('#uc_01 li:eq(1)').click(function () {
            $('.tr_rechoth').hide();
            $('.rechnum').text('49.00元');
            $('#amount').val('49.00');
            $('#days').val('90');
        })
        $('#uc_01 li:eq(2)').click(function () {
            $('.tr_rechoth').hide();
            $('.rechnum').text('98.00元');
            $('#amount').val('98.00');
            $('#days').val('180');
        })
        $('#uc_01 li:eq(3)').click(function () {
            $('.tr_rechoth').hide();
            $('.rechnum').text('198.00元');
            $('#amount').val('198.00');
            $('#days').val('365');
        })
    })

    $(function () {
        $('#doc-vld-msg').validator({
            onValid: function (validity) {
                $(validity.field).closest('.am-form-group').find('.am-alert').hide();
            },
            onInValid: function (validity) {
                var $field = $(validity.field);
                var $group = $field.closest('.am-form-group');
                var $alert = $group.find('.am-alert');
                // 使用自定义的提示信息 或 插件内置的提示信息
                var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

                if (!$alert.length) {
                    $alert = $('<div class="am-alert am-alert-danger"></div>').hide().appendTo($group);
                }
                $alert.html(msg).show();
            }
        });
    });
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>